<template>
  <div>
    <div class="home">
      <div class="input_home">
        <span class="city" @click="toCity"
          >{{ city }} <van-icon name="arrow-down"
        /></span>
        <input type="text" name="" id="" placeholder="请输入小区或地址" />
        <van-icon name="location-o" size="25px" color="white" @click="toMap" />
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swipeImg" :key="item.id">
          <img
            :src="`http://liufusong.top:8080${item.imgSrc}`"
            alt=""
            style="width: 100%; height: 212px; vertical-align: top"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="">
      <van-grid
        icon-size="45"
        style="color: lawngreen; height: 110px"
        :border="false"
      >
        <van-grid-item icon="wap-home-o" text="整租" to="/layout/search" />
        <van-grid-item icon="friends-o" text="合租" to="/layout/search" />
        <van-grid-item icon="location-o" text="地图找房" to="/map" />
        <van-grid-item icon="shop-collect-o" text="去出租" to="/rent" />
      </van-grid>
    </div>
    <div class="more">
      <h4>租房小组</h4>
      <router-link to="/my" class="more-a">更多</router-link>
    </div>

    <div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="item in groupsList" :key="item.id">
          <div class="groups">
            <van-image
              :src="`http://liufusong.top:8080${item.imgSrc}`"
              style="width: 50px; height: 50px"
            />
            <div class="groups-d">
              <p>{{ item.title }}</p>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { swiperListApi, groupsListApi } from "@/api";
export default {
  name: "",
  data() {
    return {
      swipeImg: [],
      groupsList: [],
      value: "",
      city: this.$store.state.cityName,
    };
  },
  components: {},
  computed: {},
  methods: {
    toMap() {
      this.$router.push({
        path: "/map",
      });
    },
    toCity() {
      this.$router.push({
        path: "/city",
      });
    },
  },
  async created() {
    const res = await swiperListApi();
    this.swipeImg = res.data.body;
    // console.log(this.swipeImg);
    const res2 = await groupsListApi("AREA|88cff55c-aaa4-e2e0");
    // console.log(res2);
    this.groupsList = res2.data.body;
  },
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.home {
  position: relative;
}
.home .input_home {
  position: absolute;
  left: 20px;
  top: 15px;
  z-index: 999999;
}
.home .input_home .city {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 14px;
}
.home .input_home input {
  width: 260px;
  height: 30px;
  font-size: 14px;
  color: beige;
  border-color: transparent;
  border-radius: 2px;
  padding-left: 60px;
  margin-right: 12px;
}
.more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.more-a {
  font-size: 15px;
  color: black;
}

.groups {
  display: flex;
  justify-items: center;
  align-items: center;
}

.groups .groups-d {
  padding: 5px 15px;
}
.groups .groups-d p {
  font-size: 12px;
  font-weight: bold;
}

.van-search {
  background-color: transparent;
}
.van-search__content {
  width: 280px;
}
.van-grid-item__text {
  font-size: 14px;
}
</style>
